<template>
	<view :style="{'padding-top':topHeight+130+'px'}">
		<!-- 导航栏 -->
		<navigation :showIcon="false" title="客资公海" @topHeight="topHeightFn" @bianRigh="bianRighFn">
			<!-- <view class="right_text" slot="right_text" style="position: relative;display: flex;flex-direction: column;">
				<image src="../../static/approval/classify.png" mode="" style="width: 50upx;height: 50upx;"></image>
				<text style="width: 50upx;text-align: center; font-size:18upx;font-family:PingFang SC;font-weight:500;color:rgba(82,123,241,1);">筛选</text>
			</view> -->
		</navigation>

		<!-- 筛选抽屉 -->
		<!-- <search-list ref="searchList" @showDrawer="showDrawer"></search-list> -->

		<view class="topFild" :style="{top:topHeight+'px'}">
			<view class="top">
				<input type="text" value="" v-model="phoneValue" placeholder="请输入手机号" placeholder-style="color:#D6D6D6" @input="searchPhone"
				 confirm-type='search' @confirm="inputConfirm" />
				<icon class="searchIcon" type="search" size="26upx" @click="inputConfirm"></icon>
				<text class="cancle" @click="inputConfirm">搜索</text>
			</view>

			<!-- 顶部选项卡 -->
			<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabBars" :key="index" class="nav-item" :class="{current: index === tabCurrentIndex}"
				 :id="'tab'+index" @click="changeTab(item,index)">{{item.title}}</view>
			</scroll-view>

			<view class="topbg">
				<view class="">
					客资列表(<text style="color: #7196FF;" @click="getInfo">点击信息列表即可获取</text>)
				</view>
			</view>
		</view>

		<view class="main_box">
			<view class="list_mian" @click="Goto(item.id,index)" v-for="(item,index) in sealist" :key="index">
				<uni-card :title="'客户名称:' + item.realname" :is-full="true">
					<view class="top_text">
						<view class="text_left">
							<text>预算：</text>
							<text class="">{{item.budget}}-{{item.budget_end}}</text>
						</view>
						<view class="text_right">
							<text>桌数：</text>
							<text class="">{{item.banquet_size}}-{{item.banquet_size_end}}</text>
						</view>
						<!-- <view class="" @click.stop="apply(item.id,index)" style="position: absolute;top: 0;right: 0;font-size: 20upx;color: #007AFF;">
							申请客资
						</view> -->
					</view>
					<view class="top_text">
						<view class="text_left">
							<text>咨询区域：</text>
							<text class="">{{item.zone}}</text>
						</view>

					</view>
					<view class="top_text">
						<view class="text_left">
							<text>联系方式：</text>
							<text class="">{{item.mobile}}</text>
						</view>
					</view>
					<view class="top_text">
						<view class="text_left">
							<text>婚礼日期：</text>
							<text class="">{{item.create_time}}</text>
						</view>

					</view>
					<view class="top_text">
						<view class="text_left">
							<text>所选酒店：</text>
							<text class="">{{item.hotel_text}}</text>
						</view>

					</view>
				</uni-card>
			</view>
		</view>
		<view class="model" v-if='isShow'>
			<view class="con">
				<view class="title"> 是否要申请该条客资吗？</view>
				<view class="btn">
					<button style="background: #FFFFFF;color: #406CEB;" @click="cancel">取消</button>
					<button style="background: #406CEB;color: #FFFFFF;">确认</button>
				</view>
			</view>
		</view>
		<view class="" v-if="defaultShow" style="width: 100%;height: 50upx; line-height: 50upx;text-align: center; font-size: 28upx; color: #555555;margin-top: 30upx;">
			没有更多了
		</view>

	</view>
</template>

<script>
	// import unipopupdialog from "@/components/uni-popup/uni-popup-dialog.vue"
	import navigation from '@/component/navigation.vue'
	import searchList from '@/component/search-list/search-list'
	import sun from '@/utils/sun.js'

	let windowWidth = 0,
		scrollTimer = false,
		tabBar;

	export default {
		components: {
			navigation,
			searchList
			// unipopupdialog
		},
		data() {
			return {
				topHeight: '',
				isShow: false,
				sealist: [], //列表数据
				phoneValue: '', //手机号
				page: 0,
				defaultShow: false, //是否显示 没有更多了

				showDrawer: false, // 筛选抽屉

				scrollLeft: 0, // 选项卡左滑位置
				city_id: 0,
				tabBars: [], // 选项卡列表
				tabCurrentIndex: null, //当前选项卡索引
			};
		},
		onLoad() {
			this.getCityList()
			this.getData({})
			windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		onShow() {},
		onReachBottom() {
			++this.page;
			this.getData({
				value: this.phoneValue,
				page: this.page
			})
		},
		methods: {
			topHeightFn(e) {
				this.topHeight = e
			},
			//获取客户信息
			getInfo() {
				this.isShow = true;
			},
			//取消获取客资
			cancel() {
				this.isShow = false;
			},
			// 显示筛选抽屉
			bianRighFn() {
				this.$refs.searchList.showDrawer()
			},

			// 获取城市列表
			getCityList() {
				let that = this
				sun.request({
					url: "/api/ucenter.user/cities",
					showLoading: true,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							that.tabBars = res.data.cityList
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},

			// 切换城市
			async changeTab(item, index) {
				console.log(item,index);
				this.city_id = item.id
				this.sealist = []
				// if (scrollTimer) {
				// 	//多次切换只执行最后一次
				// 	clearTimeout(scrollTimer);
				// 	scrollTimer = false;
				// }
				tabBar = await this.getElSize("nav-bar")
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}

				//延迟300ms,等待swiper动画结束再修改tabbar
				if (width - nowWidth / 2 > windowWidth / 2) {
					//如果当前项越过中心点，将其放在屏幕中心
					this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
				} else {
					this.scrollLeft = 0;
				}
				this.tabCurrentIndex = index;
				this.defaultShow = false;
				this.getData({})
			},

			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},

			// 获取列表
			getData(e) {
				let that = this
				if (that.defaultShow) {
					return
				}
				sun.request({
					url: "/h5/customer.customer/sea",
					showLoading: true,
					token: true,
					data: {
						keywords: e.value ? e.value : '',
						limit: 5,
						page: e.page ? e.page : 0,
						city_id: that.city_id
					},
					success(res) {
						if (res.code == 200) {
							if (res.data.sealist.length < 1) {
								that.defaultShow = true
							}
							that.sealist = that.sealist.concat(res.data.sealist);
							if (e.value) {
								var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
								if (myreg.test(e.value)) {
									if (that.sealist.length >= 1) {
										uni.showModal({
											title: '提示',
											content: '是否获取该条客资?',
											success: function(res) {
												if (res.confirm) {
													that.searchAllocate({
														mobile: e.value
													})
												} else if (res.cancel) {
												}
											}
										});
									}
								}
							}
						} else {
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })
						}
					}
				})
			},
			//申请客资
			applyPhone(e) {
				let that = this
				sun.request({
					url: "/h5/customer.customer/doApply",
					showLoading: true,
					token: true,
					data: {
						ids: e.id,
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			searchAllocate(e) {
				let that = this
				sun.request({
					url: "/h5/customer.customer/searchAllocate",
					showLoading: true,
					token: true,
					data: {
						mobile: e.mobile,
					},
					success(res) {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					}
				})
			},
			apply(id, index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否申请该条客资?',
					success: function(res) {
						if (res.confirm) {
							that.applyPhone({
								id: id,
								index: index
							})
						} else if (res.cancel) {
						}
					}
				});
			},
			//搜索
			inputConfirm() {
				this.sealist = [];
				this.page = 0;
				this.getData({
					value: this.phoneValue
				})
			},
			searchPhone(e) {
				this.phoneValue = e.detail.value;
			},
			//回访日志跳转
			Goto(id, index) {
				uni.navigateTo({
					url: "detail?id=" + id + "&index=" + index
				})
			},

		},
	}
</script>

<style lang="less">
	page {
		padding-top: 0upx;
	}

	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			// width: 150upx;
			padding: 5upx 20upx;
			// height: 41upx;
			text-align: center;
			// line-height: 40upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #FFFFFF;
			background: rgba(64, 108, 235, 1);
			border-radius: 21upx;

			&:after {
				width: 50%;
			}
		}
	}

	.top {
		width: 100%;
		height: 100upx;
		padding: 20upx 39upx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: relative;

		input {
			width: 590upx;
			height: 58upx;
			background: rgba(227, 227, 227, 0.2);
			border: 1upx solid rgba(0, 0, 0, 0.1);
			border-radius: 29upx;
			font-size: 26upx;
			padding: 0 40upx 0 90upx;
			box-sizing: border-box;
			float: left;
		}

		.searchIcon {
			position: absolute;
			left: 70upx;
			top: 50%;
			transform: translateY(-50%);
		}

		.cancle {
			width: 50upx;
			height: 100%;
			font-size: 26upx;
			color: #666666;
			margin-left: 30upx;
		}
	}

	.topFild {
		width: 100vw;
		position: fixed;
		top: 170upx;
		left: 0;
		z-index: 10;

		.top_search {
			width: 100%;
			background-color: #FFFFFF;
			padding: 0 32upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			text {
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(64, 108, 235, 1);
			}
		}

		.topbg {
			width: 100%;
			height: 64upx;
			background: rgba(245, 246, 246, 1);
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(152, 152, 152, 1);
			padding-left: 36upx;
		}
	}



	///当下得样式
	.main_box {
		width: 100%;
	}

	.list_mian {
		width: 100%;
		margin-top: 16upx;

		.top_text {
			width: 100%;
			display: flex;
			justify-content: left;
			position: relative;

			.text_left {
				text:first-child {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(25, 25, 25, 1);
				}

				text:last-child {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(25, 25, 25, 1);
				}
			}

			.text_right {
				padding-left: 150upx;

				text:first-child {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(25, 25, 25, 1);
				}

				text:last-child {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(25, 25, 25, 1);
				}
			}
		}
	}

	.uni-card__header-title-text[data-v-7266c9fb] {
		font-size: 14upx;
	}

	//遮罩层
	.model {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(21, 21, 21, 0.5);
		z-index: 100;

		.con {
			width: 576upx;
			height: 242upx;
			background: #FFFFFF;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			opacity: 1;

			.title {
				width: 100%;
				height: 50%;
				border-bottom: 1upx solid #EEEEEE;
				box-sizing: border-box;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(25, 25, 25, 1);
				text-align: center;
				line-height: 141upx;
			}

			.btn {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				button {
					width: 194upx;
					height: 54upx;
					border: 1upx solid rgba(64, 108, 235, 1);
					border-radius: 27upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(64, 108, 235, 1);
					line-height: 54upx;
				}
			}
		}
	}
</style>
